iT邦幫忙

第 12 屆 iThome 鐵人賽

DAY 6
1

用知識解決問題代表你持續進步,用勞力解決問題只能說明你原地踏步

/images/emoticon/emoticon19.gif 為什麼專案需要環境變數?

如果你曾經有撰寫網頁端的經驗,你也許體會過以下狀況

  1. 某些 function 只能在測試環境中使用,正式環境禁止執行
  2. 資料庫搬移到新環境,ip、username、password都需要修正
  3. 這份專案由多人維護,每個人都有個別的設定
  4. 專案在不同伺服器儲存的位置不一樣
  5. ...

如果這些參數都分散在各個檔案,你在不同環境發佈的時候會改到很想死...


/images/emoticon/emoticon12.gif 今日目標

  1. 了解環境變數使用時機
  2. 分析本專案中哪些參數適合當環境變數
  3. 學會使用環境變數

1. 環境變數使用時機?

環境變數的功能就是把散佈在各個檔案且會在不同環境需要調整的參數集合到一個檔案裡面,這樣就能讓你的程式在不同環境中快速發布

常用情境如下:

  1. 用來區分正式(prod) / 測試(dev)環境
  2. 設定重要不得外流的資料(資料庫帳號、密碼,使用者權杖...)
  3. 需要統一設定的變數內容(系統ip、網址、port...)

2. 專案中哪些參數適合當環境變數?

我們專案目標是做 FB、IG 的爬蟲,爬蟲會定時執行且將資料儲存到雲端方便瀏覽,最後透過 LINE 回報今日執行狀況。基於這些需求,我會設定環境變數如下:

不得外流的資料:

  1. FB & IG 的帳號密碼
    原本我想要使用 FB & IG 提供的 api 來抓取我想要的追蹤者人數即每日發文篇數等等資訊,但實際研究後發現由於隱私安全相關問題,所以他們提供的api只能查自己有權限的粉專,所以我放棄使用官方api 改用 selenium 網頁模擬器來做爬蟲,在實際操作中發現以下規則,所以必需使用真實存在的帳戶來爬蟲:
    • FB 部分粉專必須要登入後才能觀看
    • IG則是全部都要登入,部分粉專要按追蹤後才能觀看
  2. google sheet 的 id
    比起產生一份 excel 文件,我認為雲端的 google sheet 是更好的方法,因為你可以隨時隨地觀看,如果你想要更換新的 google sheet 來儲存資料也只需要修改 id 就好
  3. LINE 的 token
    你可以把 token 理解成專案要傳訊息給LINE的權杖,他掌握著能向某個聊天室發訊息的權限

要統一設定的變數:

  1. 執行爬蟲時間
    因為每個人希望爬蟲執行的時間點都不一樣,所以把他列為環境變數

3. 使用環境變數

接著我們要知道如何在程式中引入昨天安裝的 dotenv 套件,如果還沒安裝的請在終端機(Terminal)輸入指令

yarn add dotenv

套件安裝完後,我下面的說明建議你搭配官方文件來了解如何使用,畢竟不是所有套件都有中文資源,你要練習自己讀懂官方文件

  • 引入 dotenv 套件的方式
    require('dotenv').config();
    
  • 在專案根目錄下創建 .env 檔案,裡面放置環境變數

    .env

    YOUR_VARIABLE='這是環境變數'
    
  • 程式讀取環境變數的方式(xxx是你在 .env 裡面設定的變數)
    process.env.xxx
    
  • 了解套件使用方式後我們來練習將環境變數取出並輸出在終端機(Terminal)上面

    index.js

    require('dotenv').config(); //載入.env環境檔
    function getEnvVariable () {
        const env_variable= process.env.YOUR_VARIABLE // 取出環境變數
        console.log(env_variable)
    }
    getEnvVariable()
    

/images/emoticon/emoticon07.gif 執行程式

  1. 在專案資料夾的終端機(Terminal)執行指令

    yarn start
    

    如果有輸出這是環境變數的字串就代表你成功嚕~
    https://ithelp.ithome.com.tw/upload/images/20200928/20103256eDuy2mhEqJ.png

  2. 你可以嘗試修改.env裡面的參數再執行 yarn start 來看輸出是不是跟著改變

    YOUR_VARIABLE='可以修改我喔'
    

    https://ithelp.ithome.com.tw/upload/images/20200928/20103256dMpAcOekNg.png


ℹ️ 專案原始碼

今天的完整程式碼可以在這裡找到喔


我在 Medium 平台 也分享了許多技術文章
❝ 主題涵蓋「MIS & DEVOPS資料庫前端後端MICROSFT 365GOOGLE 雲端應用個人研究」希望可以幫助遇到相同問題、想自我成長的人。❞

https://ithelp.ithome.com.tw/upload/images/20210720/20103256fSYXlTEtRN.jpg
在許多人的幫助下,本系列文章已出版成書,並添加了新的篇章與細節補充:

  • 加入更多實務經驗,用完整的開發流程讓讀者了解專案每個階段要注意的事項
  • 將爬蟲的步驟與技巧做更詳細的說明,讓讀者可以輕鬆入門
  • 調整專案架構
    • 優化爬蟲程式,以更廣的視角來擷取網頁資訊
    • 增加資料驗證、錯誤通知等功能,讓爬蟲執行遇到問題時可以第一時間通知使用者
    • 排程部分改用 node-schedule & pm2 的組合,讓讀者可以輕鬆管理專案程序並獲得更精確的 log 資訊

有興趣的朋友可以到天瓏書局選購,感謝大家的支持。
購書連結https://www.tenlong.com.tw/products/9789864348008


上一篇
【Day5】用yarn安裝及控管套件 & 善用關鍵字讓全世界的大神幫你一把
下一篇
【Day7】gitignore - 杜絕上傳錯誤資料,從此不再發生慘痛經驗
系列文
行銷廣告、電商小編的武器,FB & IG 爬蟲專案從零開始30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言